import { InfoCircleOutlined } from "@ant-design/icons";
import type { RadioChangeEvent } from "antd";
import { Checkbox, Input, Radio, Select, Switch } from "antd";
import type { CheckboxChangeEvent } from "antd/es/checkbox";
import { useEffect, useState } from "react";
import request from "umi-request";
import "./style/CompanyManagement/CompanyManagement.scss";
const response = await request.get("/api/company");

//定义的tab切换数据的类型
interface Tab {
  label: string;
}
//定义的addtab切换数据的类型
interface AddTab {
  Addlabel: string;
}

const CompanyManagement = () => {
  const now = new Date();
  const year = now.getFullYear(); // 获取当前年份
  const month = now.getMonth() + 1; // 获取当前月份（注意返回值范围是0-11）
  const day = now.getDate(); // 获取当前日期
  //tab切换数据
  const TABS: Tab[] = [{ label: "列表" }, { label: "添加" }];
  //添加里的tab切换数据
  const AddTABS: AddTab[] = [
    { Addlabel: "基本信息" }
  ];
  //tab表格数据
  const [arr, setarr] = useState<any>([
    {
      id: "788524244",
      checked: false,
      "paixu|100-1000": 100,
      xiaoqu: "@ctitle(4,6)",
      quyu: "@city",
      date: "@date",
      "checkedtwo|1": false,
    },
  ]);
  const [narr, setnarr] = useState([]);
  //tab切换
  const [activeTab, setActiveTab] = useState<number>(0);
  //添加里面的的tab切换
  const [AddactiveTab, setAddActiveTab] = useState<number>(0);
  //状态
  const [status, setstatus] = useState<boolean>(false);
  //tab切换点击
  function handleClick(index: number) {
    setActiveTab(index);
  }
  //添加里面的的tab切换点击
  function handleClickAdd(index: number) {
    setAddActiveTab(index);
    console.log(index);
  }

  //下拉框
  const onChange = (value: string) => {
    let brr = [...arr];
    if (value == "启用") {
      let crr: any = brr.filter((item: any) => {
        return item.checkedtwo == true;
      });
      setnarr(crr);
    } else if (value == "禁用") {
      let crr: any = brr.filter((item: any) => {
        return item.checkedtwo == false;
      });
      setnarr(crr);
    } else {
      setnarr(arr);
    }
  };

  //搜索 模糊查询
  const onSearch = (value: string) => {
    let brr = [...arr];
    let crr: any = brr.filter((item) => {
      return item.xiaoqu.includes(value);
    });
    setnarr(crr);
  };

  //input
  const { Search } = Input;

  //顶部多选框
  function checkAll(e: any) {
    console.log(`checkAll = ${e.target.checked}`);
  }
  //反选
  function yfaBdbawi(item: any) {
    let brr = [...arr];
    for (let i = 0; i < arr.length; i++) {
      if (brr[i].id == item.id) {
        item.checked = !item.checked;
      }
    }

    setarr(brr);
    let kgMc = brr.every((item) => {
      return item.checked;
    });
    setkg(kgMc);
  }
  //底部多选框
  const Checkboxs = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  //单选
  function check(e: any) {
    console.log(`单选 = ${e.target.checked}`);
  }
  //编辑点击事件
  function edit() {
    console.log("编辑", 1);
  }
  //删除点击事件
  function del() {
    console.log("删除", 1);
  }
  //选中删除
  function shanchu() {
    let brr = [...narr];
    let crr: any = [];
    brr.forEach((item: any, index) => {
      if (item.checked === false) {
        crr.push(item);
      }
    });
    setnarr(crr);
    setkg(false);
  }
  //配套信息里的提交按钮
  function AddTj() {}
  //小区信息里的提交按钮
  function CommunityAddtj() {
    let brr = [...narr];
    brr.push(brr[0]);
    setnarr(brr);
    setActiveTab(0);
  }
  //状态
  function statu(e: any) {
    let brr = [...narr];
    brr.forEach((item: any, index) => {
      if (item == e) {
        item.checkedtwo = !item.checkedtwo;
      }
    });
    setnarr(brr);
  }
  ///全选
  function inputc(e: any) {
    setkg(e.target.checked);
    let brr: any = [...narr];
    brr.forEach((item: any) => {
      return (item.checked = e.target.checked);
    });
    setnarr(brr);
  }
  //添加里面的 单选框
  const [value, setValue] = useState(1);
  //定义全选状态
  const [kg, setkg] = useState(false);
  const onChangeRadio = (e: RadioChangeEvent) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };
  //删除
  function delect(index: number) {
    let brr = [...narr];
    brr.splice(index, 1);
    setnarr(brr);
  }
  useEffect(() => {
    setarr(response);
    setnarr(response);
  }, []);
  return (
    //大盒子
    <div className="companybox">
      {/* 头部 */}
      <div className="Communityheader">
        {/* 渲染的 列表|添加 tab切换 */}
        <div className="CommunityheaderOne">
          {TABS.map((tab, index) => (
            <li
              key={index}
              onClick={() => handleClick(index)}
              className={index === activeTab ? "Communityactive" : ""}
            >
              {tab.label}
            </li>
          ))}
        </div>
      </div>
      {/* 中间 */}
      <div className="CommunityMain">
        {/* tab切换 内容  列表*/}
        <div
          className="Communitytab"
          style={{ display: activeTab == 0 ? "block" : "" }}
        >
          <div className="CommunityMainTow" >
            <div className="CommunityMainTowA">
              <div>区域</div>
              <div>
                <Select
                  showSearch
                  placeholder="--请选择.."
                  optionFilterProp="children"
                  onChange={onChange}
                  onSearch={onSearch}
                  filterOption={(input, option) =>
                    (option?.label ?? "")
                      .toLowerCase()
                      .includes(input.toLowerCase())
                  }
                  options={[
                    {
                      value: "海口",
                      label: "海口",
                    },
                    {
                      value: "三亚",
                      label: "三亚",
                    },
                    {
                      value: "大连",
                      label: "大连",
                    },
                    {
                      value: "贵州",
                      label: "贵州",
                    },
                    {
                      value: "西藏",
                      label: "西藏",
                    },
                    {
                      value: "新疆",
                      label: "新疆",
                    },
                    {
                      value: "桂林",
                      label: "桂林",
                    },
                    {
                      value: "厦门",
                      label: "厦门",
                    },
                    {
                      value: "杭州",
                      label: "杭州",
                    },
                  ]}
                />
              </div>
            </div>
            <div className="CommunityMainTowB">
              <div>状态</div>
              <div>
                <Select
                  showSearch
                  placeholder="-所有-"
                  optionFilterProp="children"
                  onChange={onChange}
                  onSearch={onSearch}
                  filterOption={(input, option) =>
                    (option?.label ?? "")
                      .toLowerCase()
                      .includes(input.toLowerCase())
                  }
                  options={[
                    {
                      value: "所有",
                      label: "所有",
                    },
                    {
                      value: "启用",
                      label: "启用",
                    },
                    {
                      value: "禁用",
                      label: "禁用",
                    },
                  ]}
                />
              </div>
            </div>
            <div className="CommunityMainTowC">
              <div>关键词</div>
              <div>
                <Search
                  placeholder="输入关键词搜索"
                  allowClear
                  enterButton="搜索"
                  size="middle"
                  onSearch={onSearch}
                />
              </div>
            </div>
          </div>
          <div className="tabBox">
            {/* tab表格 */}
            <table className="table" cellSpacing={0}>
              {/* 头部 */}
              <thead>
                <tr>
                  <td>
                    <input checked={kg} onChange={inputc} type="checkbox" />
                  </td>
                  <td>代理商名称</td>
                  <td>联系人</td>
                  <td>手机号码</td>
                  <td>代理城市</td>
                  <td>添加时间</td>
                  <td>过期时间</td>
                  <td>状态</td>
                  <td>操作</td>
                </tr>
              </thead>
              {/* 中间 */}

              <tbody>
                {/* 渲染 */}
                {narr
                  ? narr.map((item: any, index: number) => {
                      return (
                        <tr key={index}>
                          <td>
                            <input
                              type="checkbox"
                              checked={item.checked}
                              onChange={() => yfaBdbawi(item)}
                            />
                          </td>
                          <td style={{ width: "8vw" }}>{item.ctitle}</td>
                          <td style={{ width: "8vw" }}>{item.cname}</td>
                          <td style={{ width: "10vw" }}>{item.phone}</td>
                          <td style={{ width: "8vw" }}>{item.region}</td>
                          <td style={{ width: "14vw" }}>{item.adddatetime}</td>
                          <td style={{ width: "14vw",color:"red" }}>{item.now}</td>
                          <td style={{ width: "10vw" }}>
                            <Switch
                              size="default"
                              checkedChildren="正常"
                              unCheckedChildren="禁用"
                              checked={item.checkedtwo}
                              onChange={() => statu(item)}
                            />
                          </td>
                          <td>
                            <button className="bj" onClick={edit}>
                              编辑
                            </button>
                            <button
                              className="del"
                              onClick={() => delect(index)}
                            >
                              删除
                            </button>
                          </td>
                        </tr>
                      );
                    })
                  : ""}
              </tbody>
            </table>
          </div>
          {/* 底部 */}
          <div className="CommunityFoot">
            <div className="CommunityFootA">
              <Checkbox checked={kg} onChange={inputc}>
                全选/取消
              </Checkbox>

              <button onClick={shanchu}>删除</button>
            </div>
          </div>
          {/* 状态显示 */}
          <div
            className="tbodystatu"
            style={{
              display: status ? "block" : "",
            }}
          >
            <img src={require("../../imgs/tu.png")} alt="" />
          </div>
        </div>

        {/* 添加 */}
        <div
          className="Communitytab"
          style={{ display: activeTab == 1 ? "block" : "" }}
        >
          <div className="CommunitytabTow">
            {/* 渲染的 列表|添加 tab切换 */}
            <div className="CommunitytabTowAdd">
              {AddTABS.map((Addtab, index) => (
                <li
                  key={index}
                  onClick={() => handleClickAdd(index)}
                  className={index === AddactiveTab ? "CommunityactiveAdd" : ""}
                >
                  {Addtab.Addlabel}
                </li>
              ))}
            </div>
            {/* 小区信息 */}
            <div
              className="CommunitytabAdd"
              style={{ display: AddactiveTab == 0 ? "block" : "" }}
            >
              <div className="CommunitytabAddOne">
                <div className="divOne">
                  <div>所属区域</div>
                  <div>
                    <Select
                      showSearch
                      placeholder="--请选择--"
                      optionFilterProp="children"
                      onChange={onChange}
                      onSearch={onSearch}
                      filterOption={(input, option) =>
                        (option?.label ?? "")
                          .toLowerCase()
                          .includes(input.toLowerCase())
                      }
                      options={[
                        {
                          value: "海口",
                          label: "海口",
                        },
                        {
                          value: "三亚",
                          label: "三亚",
                        },
                        {
                          value: "大连",
                          label: "大连",
                        },
                        {
                          value: "贵州",
                          label: "贵州",
                        },
                        {
                          value: "西藏",
                          label: "西藏",
                        },
                        {
                          value: "新疆",
                          label: "新疆",
                        },
                        {
                          value: "桂林",
                          label: "桂林",
                        },
                        {
                          value: "厦门",
                          label: "厦门",
                        },
                        {
                          value: "杭州",
                          label: "杭州",
                        },
                      ]}
                    />
                  </div>
                  <div>
                    <Select
                      showSearch
                      placeholder="--请选择--"
                      optionFilterProp="children"
                      onChange={onChange}
                      onSearch={onSearch}
                      filterOption={(input, option) =>
                        (option?.label ?? "")
                          .toLowerCase()
                          .includes(input.toLowerCase())
                      }
                      options={[
                        {
                          value: "请选择",
                          label: "请选择",
                        },
                      ]}
                    />
                  </div>
                </div>
              </div>
              <div className="CommunitytabAddTow">
                <div className="divTow">
                  <div className="divTowA">
                    <div>小区名称</div>
                    <div>
                      <input type="text" placeholder="小区名称" />
                    </div>
                  </div>
                  <div className="divTowB">
                    <div>小区地址</div>
                    <div>
                      <input type="text" placeholder="海口市龙化市" />
                    </div>
                  </div>
                </div>
              </div>
              <div className="CommunitytabAddThird">
                <div className="divThird">
                  <div className="divThirdA">
                    <div>建筑年代</div>
                    <div>
                      <input type="text" placeholder="2017" />
                    </div>
                  </div>
                  <div className="divThirdB">
                    <div>地图坐标</div>
                    <div>
                      <input
                        className="divThirdBInput"
                        type="text"
                        placeholder="115.345,22.1349"
                      />
                    </div>
                    <button>标注位置</button>
                  </div>
                </div>
              </div>
              <div className="CommunitytabAddFour">
                <div className="divFour">
                  <div>最近成交</div>
                  <div>
                    <input type="text" placeholder="1" />
                  </div>
                  <div>套</div>
                </div>
              </div>
              <div className="CommunitytabAddFive">
                <div className="divFive">
                  <div>物业类型</div>
                  <Radio.Group onChange={onChangeRadio} value={value}>
                    <Radio value={1}>住宅</Radio>
                    <Radio value={2}>写字楼</Radio>
                    <Radio value={3}>别墅</Radio>
                    <Radio value={4}>商铺</Radio>
                  </Radio.Group>
                </div>
              </div>
              <div className="CommunitytabAddSix">
                <div className="divSix">
                  <div>特色标签</div>
                  <div>
                    <textarea
                      className="wby"
                      placeholder="多个标签请用','号分隔"
                    ></textarea>
                  </div>
                </div>
              </div>
              <div className="CommunitytabAddSeven">
                <div className="divSeven">
                  <div>缩略图</div>
                  <button>上传图片</button>
                </div>
              </div>
              <div className="CommunitytabAddEight">
                <div className="divEight">
                  <div>轮播图</div>
                  <button>选择图片</button>
                </div>
              </div>
              <div className="CommunitytabAddNine">
                <div className="divNine">
                  <div>
                    全景看房
                    <InfoCircleOutlined style={{ color: "#3977B7" }} />
                  </div>
                  <div>
                    <input
                      type="text"
                      placeholder="在720yun.com创建全景相册,复制链接地址到输入框"
                    />
                  </div>
                </div>
              </div>
              <div className="CommunitytabAddTen">
                <div className="divTen">
                  <div>小区介绍</div>
                  <div>
                    <img src={require("../../imgs/huabu.png")} alt="" />
                  </div>
                </div>
              </div>
              <div className="CommunitytabAddtj">
                <button onClick={CommunityAddtj}>提交</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CompanyManagement;
